<!doctype html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = ${post.spec.title}, hero = ~{::hero}, content = ~{::content}, head = ~{::head}, footer = ~{::footer}, sidebar = ~{::sidebar}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : '')}"
>
  <th:block th:fragment="head">
    <meta name="author" th:content="${post.owner.displayName}">
    <meta property="og:title" th:content="${post.spec.title}"/>
    <meta property="og:image" th:content="${not #strings.isEmpty(post.spec.cover) ? site.url+post.spec.cover : site.url+theme.config.post.art_default_img}"/>
    <meta property="og:url" th:content="${site.url+post.status.permalink}">
    <meta property="og:type" content="article">
    <script th:src="${theme.config.post.jweixin_uri}" async></script>
    <script type="text/javascript">
      (function (o) {
        const ART_title ='[[${post.spec.title}]]';
        const ART_imgUrl = '[[${not #strings.isEmpty(post.spec.cover) ? site.url+post.spec.cover : site.url+theme.config.post.art_default_img}]]';
        const API_SHARE1 = "updateAppMessageShareData";
        const API_SHARE2 = "updateTimelineShareData";
        function register_weixin(times){
          if (times > 12) return;

          const xhr = new XMLHttpRequest();
          xhr.open("POST", "/wx-api/token");
          xhr.setRequestHeader("Content-Type", "application/json");
          xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
              const response = JSON.parse(xhr.responseText);
              const params = response.param;
              wx.config({
                debug: false, appId: params.id, timestamp: params.timestamp, nonceStr: params.nonceStr, signature: params.signature,
                jsApiList: [API_SHARE1, API_SHARE2] 
              });
              wx.ready(function () { 
                wx.checkJsApi({ jsApiList: [API_SHARE1], success: function(res) {
                  wx.updateAppMessageShareData({ title: ART_title, desc: '', link: window.location.href, imgUrl: ART_imgUrl, success: function(){}});
                }});
                wx.checkJsApi({ jsApiList: [API_SHARE2], success: function(res) {
                  wx.updateTimelineShareData({ title: ART_title, link: window.location.href, imgUrl: ART_imgUrl, success: function(){}});
                }});
              });
              wx.error(function(res){ register_weixin(times++); });
            } else register_weixin(times++);
          };
          xhr.onerror = function () { register_weixin(times++); };
          
          xhr.send(JSON.stringify({ param: { tag: '[[${site.url}]]', url: window.location.href.split('#')[0] }, method: "token" }));
        }
        if (document.readyState ==="complete") setTimeout(function () { register_weixin(0); }, 0);
        else { const preonload = o.onload; o.onload = function () { if (preonload) preonload(); setTimeout(function () { register_weixin(0); }, 0); }; }
      })(window);
    </script>
    <link rel="stylesheet" th:href="@{/assets/styles/APlayer.min.css?v={version}(version=${theme.spec.version})}" async/>
    <script th:src="@{/assets/js/APlayer.min.js?v={version}(version=${theme.spec.version})}" ></script>
  </th:block>
  <th:block th:fragment="footer">
  </th:block>
  <th:block th:fragment="sidebar_prepend">
    <div class="toc-container sticky top-20 z-[5] w-full cursor-pointer rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800">
      <h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
        <span class="i-tabler-list text-lg"></span>
        <th:block th:text="#{page.post.toc}"></th:block>
      </h2>
      <div class="toc mt-2 max-h-64 overflow-auto"></div>
    </div>
  </th:block>
  <th:block th:fragment="content">
    <div x-data="upvote('post','content.halo.run','posts')" class="bg-white p-4 dark:bg-slate-800">
      <div
        th:attr="x-data=|{name:'${post.metadata.name}'}|"
        class="flex flex-col items-center justify-between gap-2 sm:flex-row"
      >
        <div class="flex w-full items-center justify-start gap-2">
          <a
            th:unless="${#strings.isEmpty(post.owner.avatar)}"
            th:href="${#lists.size(post.categories) gt 0 ? post.categories[0].status.permalink : '/categories/default'}"
            th:title="${post.owner.displayName}"
          >
            <img th:src="${post.owner.avatar}" class="size-10 rounded-full" th:alt="${post.owner.displayName}" />
          </a>
          <div class="flex flex-col gap-0.5">
            <a
              th:href="${#lists.size(post.categories) gt 0 ? post.categories[0].status.permalink : '/categories/default'}"
              th:title="${post.owner.displayName}"
              class="text-sm font-semibold text-gray-900 hover:text-gray-600 dark:text-slate-100 dark:hover:text-slate-200"
              th:text="${post.owner.displayName}"
            ></a>
            <div class="flex items-center gap-2 text-xs font-light text-gray-600 dark:text-slate-100">
              <span th:text="#{common.publishedOn(${#dates.format(post.spec.publishTime,'yyyy-MM-dd')})}"></span>
            </div>
          </div>
        </div>
      </div>
      <h1 class="mt-3 text-2xl font-medium dark:text-slate-50" th:text="${post.spec.title}" ></h1>
      <article id="content" class="!max-w-none break-words tailwind-typography" th:utext="${post.content.content}" ></article>
      <script type="text/javascript">
        (function () {
          var max_ = 0;
          while (max_ ++ < 999) {
            const audio = document.querySelector("audio");
            if (!audio) break;
            var name = decodeURI(audio.src);
            var uri = audio.src;
            name = name.slice(name.lastIndexOf("/") + 1, name.lastIndexOf(".")).replace(/-[a-z0-9]+$/i, "").replace(".m4a.(1)", "").replace(/\.m4a\.?|\.mp3\.?/g, '');
            const div = document.createElement("div");
            new APlayer({ container: div, audio: [{ url: uri, name: name, cover: "[[${theme.config.aplayer.aplayer_default_icon}]]" }], brightness: "[[${theme.config.aplayer.aplayer_brightness}]]" , thumbicon: "[[${theme.config.aplayer.aplayer_thumbicon}]]", played_color: "[[${theme.config.aplayer.aplayer_played_color}]]" });
            div.dataset.originalSrc = uri;
            audio.replaceWith(div);
          }
        })();
      </script>
    </div>
  </th:block>
</html>
